<template>
    <div class="homeP">
        <div class="choose">
            <h4 style="margin-top:80px;height:30px;line-height:30px;">当前套餐</h4>
            <p style="height:28px;line-height:28px;">支持并发：<span style="color:#62ACF4;font-weight:bold; font-size:18px;">200人</span></p>
            <p style="color:gray;height:28px;line-height:28px;">有限期至：2017-08-09</p>
            <router-link to="/home2"><el-button type="primary">续费套餐</el-button></router-link>
        </div>
        <div class="home_content">
            <div class="list list1_1">
                <h3 style="color:#38ACB5;margin-left:-300px;">6</h3>
                <p style="margin-left:-300px;">活动</p>
                <img src="../../assets/home_1.png">
            </div>
            <div class="list list1_2">
                <h3 style="color:#FF503F;">600,00</h3>
                <p>收益</p>
                <img src="../../assets/home_2.png">
            </div>
            <div class="list list1_3">
                <h3 style="color:#647CF0;">479,368</h3>
                <p>累计观看人数</p>
                <img src="../../assets/home_3.png">
            </div>
            <div class="list list1_4">
                <h3 style="color:#62ACF4;">566,456</h3>
                <p>累计观看分钟数</p>
                <img src="../../assets/home_4.png">
            </div>
        </div>
        <p>最近的直播</p>
        <figure>
            <img src="../../assets/home_5.jpg">
            <figcaption>
                <h4>
                    变形金刚
                    <span>1<span> 天 </span>07<span> 小时 </span>46<span> 分 </span>49<span> 秒后开始直播</span></span>
                </h4>
                <p class="time">2017-01-06 16:00</p>
                <p class="description">美版《变形金刚G1》一共4季，前两季讲述的是擎天柱率领的汽车人和威震天所率领的霸天虎之间的战争故事。第3季则是接替擎天柱的补天士和惊破天(被宇宙大帝修复改造的威震天)分别率领各自武装为信仰而战的故事。美版《变形金刚》还有一个大电影，讲述的是补天士与擎天柱政权交接的过程，和全体变形金刚合力消灭宇宙大帝的事迹。</p>
                <p class="detail">收费：<span>免费</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;观看人数：<span>0</span></p>
            </figcaption>
        </figure>
        <figure style="margin-bottom:30px;">
            <img src="../../assets/home_6.jpg">
            <figcaption>
                <h4>
                    环太平洋
                    <span><span>直播结束</span></span>
                </h4>
                <p class="time">2017-01-05 17:00</p>
                <p class="description">美版《变形金刚G1》一共4季，前两季讲述的是擎天柱率领的汽车人和威震天所率领的霸天虎之间的战争故事。第3季则是接替擎天柱的补天士和惊破天(被宇宙大帝修复改造的威震天)分别率领各自武装为信仰而战的故事。美版《变形金刚》还有一个大电影，讲述的是补天士与擎天柱政权交接的过程，和全体变形金刚合力消灭宇宙大帝的事迹。</p>
                <p class="detail">收费：<span>5元</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;观看人数：<span>47394</span></p>
            </figcaption>
        </figure>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .choose{
        width: 260px;
        height: 315px;
        margin-top: 100px;
        margin-left: 105px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        display: block;
    }

    .home_content{
        margin-top: -400px;
        margin-left: 360px;
        display: inline-block;
    }

    .list{
        width: 400px;
        height: 140px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        margin-left: 30px;
        margin-top: 30px;
    }

    .list1_1{
        border-bottom: 10px solid #38ACB5;
        display: block;
        float: left;
    }

    .list1_2{
        border-bottom: 10px solid #FF503F;
        display: block;
        float: left;
    }

    .list1_3{
        border-bottom: 10px solid #647CF0;
        display: block;
        float: left;
    }

    .list1_4{
        border-bottom: 10px solid #62ACF4;
        display: block;
        float: left;
    }

    .list h3{
        font-size: 24px;
        margin-top: 50px;
        margin-left: -240px;
    }

    .list p{
        font-size: 16px;
        color: #4F5254;
        margin-left: -240px;
    }

    .list img{
        float: right;
        margin-top: -50px;
        margin-right: 54px;
    }

    .homeP>p{
        font-size: 16px;
        color: #2C2C2C;
        font-weight: normal;
        margin-top: 22px;
        float: left;
        margin-left: 105px;
    }

    .homeP>figure{
        width: 1120px;
        height: 300px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        margin-top: 22px;
        float: left;
        margin-left: 105px;
    }

    .homeP>figure>img{
        float: left;
    }

    .homeP>figure>figcaption{
        width: 720px;
        float: left;
        text-align: left;
    }

    .homeP>figure>figcaption>h4{
        width: 94%;
        font-size: 24px;
        color: #2C2C2C;
        float: left;
        margin-top: 20px;
        padding-left: 30px;
    }

    .homeP>figure>figcaption>h4>span{
        font-size: 20px;
        float:right;
        margin-right: 20px;
    }

    .homeP>figure>figcaption>h4>span>span{
        font-size: 16px;
        color: #4F5254;
        font-weight: normal;
    }

    .homeP>figure>figcaption>.time{
        width: 94%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #838383;
        float: left;
        margin-top: 15px;
        margin-left: 30px;
    }

    .homeP>figure>figcaption>.description{
        width: 90%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #4F5254;
        margin-top: 15px;
        float: left;
        margin-left: 30px;
    }

    .homeP>figure>figcaption>.detail{
        width: 88%;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        margin-top: 120px;
        float: left;
        margin-left: 30px;
    }

    .homeP>figure>figcaption>.detail span{
        color: #38ACB5;
    }
</style>